<template>
  <div class="login-page">
    <el-card class="box">
      <template #header>
        <img class="logo-img"
          src="http://likede2-admin.itheima.net/img/logo.595745bd.png"
          alt=""
      /></template>
      <el-form autocomplete="off" :model="form" :rules="rules">
        <el-form-item prop="loginName">
          <el-input
            v-model="form.loginName"
            placeholder="输入用户名"
            prefix-icon="iconfont icon-shouji"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="form.password"
            placeholder="输入用户密码"
            prefix-icon="iconfont icon-jiesuo"
            suffix-icon="iconfont icon-icon-mianxing_fuzhi_bukejian"
          ></el-input>
        </el-form-item>
        <div class="yanzheng">
          <el-form-item class="input1">
          <el-input
            type="text"
            placeholder="请输入验证码"
            v-model="form.code"
            prefix-icon="iconfont icon-a-zhengqueduigou"
          ></el-input>
        </el-form-item>
        <div class="pic">
          <img  @click="changeClientToken" :src="requestSrc + form.clientToken" alt="">
        </div>
        </div>
        <div class="login">
          <button @click="Login">登录</button>

        </div>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { login } from '@/api/user'
export default {
  name: 'login-page',
  async created () {
    this.changeClientToken()
  },
  data () {
    return {
      requestSrc: 'https://likede2-java.itheima.net/api/user-service/user/imageCode/',
      form: {
        loginName: 'admin', // 登录名
        password: 'admin', // 密码
        code: '', // 根据随机数生成的4位数字字母组合验证码
        clientToken: '', // 用于生成验证码的随机数
        loginType: 0 // 登录类型
      },
      rules: {
        loginName: [
          {
            required: true,
            message: '请输入用户名',
            trigger: ['blur', 'change']
          },
          {
            min: 5,
            max: 11,
            message: '长度在 5 到 11 个字符',
            trigger: ['blur', 'change']
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: ['blur', 'change']
          },
          {
            pattern: /^\w{5,11}$/,
            message: '请输入 5 到 10 位的密码',
            trigger: ['blur', 'change']
          }
        ]

      }
    }
  },

  methods: {
    async Login () {
      const { token } = await login(this.form)
      console.log(token)
      this.$store.commit('user/setUserToken', token)
      this.$router.push('/experienceproject')
    },
    changeClientToken () { // 改变clientToken
      const str = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz1234567890' // 10
      for (let i = 0; i < 32; i++) {
        this.form.clientToken += str[Math.floor(Math.random() * str.length)]
      }
    }
  }
}
</script>;

<style lang="scss" scoped>
.login-page {
  min-height: 100vh;
  background: url("http://likede2-admin.itheima.net/img/background.be4fae7d.png")
    no-repeat center / cover;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .el-card {
    width: 420px;

    ::v-deep .el-card__header {
      height: 0px;
      background: #fff;
      text-align: center;
      line-height: 40px;
      color: #fff;
      font-size: 18px;
      border-bottom: none;
    }
  }
  .el-form {
    padding: 0 20px;
  }
}
button {
  width: 340px;
  height: 40px;
  background: rgba(114, 124, 245, 1);
  border: none;
  color: #fff;
}
.box {
  position: relative;
  overflow: visible;
}
.box .logo-img {
  width: 90px;
  height: 90px;
  position: absolute;
  top: -50px;
  left: 36%;
}
.canvas {
  width: 120px;
  height: 30px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  line-height: 30px;
}
input {
  outline: none;
  border: 0px;
}
.yanzheng {
  position: relative;
}
.input1 {
  width: 230px;
}
.pic {
  position: absolute;
  top:0;
  left: 230px;
  margin-top: 3px;
  width: 100px;
  height: 36px;
  border: 1px solid palegreen;
}
.pic img {
  width: 100%;
  height: 36px;
}
</style>
